/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useState, useMemo } from 'react';
// import { getData } from "../../../service";
import { Image, Skeleton, Card } from 'antd';
import { useLocation, useNavigate } from 'react-router-dom';
import { data, IData, IItem } from '../../../utils/mock'

import "./index.less";


interface ICity {
    current: IItem
}

const City: React.FC<ICity> = ({current}) => {
    const navigate = useNavigate()
    return (
        <Card
            key={current.id}
            hoverable
            onClick={()=>(navigate(`/home/city?cityName=${current.title}`),window.scrollTo(0,0))}
            style={{ width: 240 }}
            cover={<img alt="example" src={current.url} />}
        >
            <Card.Meta title={current.title} description={current.desc}/>
        </Card>
    )
}

const Page: React.FC = ()=> {
    const { content } = data as IData
    const [loading, setLoading] = useState(false)
    const location = useLocation();
    
    const cityName = useMemo(()=>{
        const searchParams = new URLSearchParams(location.search);
        return searchParams.get('cityName')|| '北京游玩路线';
    },[location.search])

    const currentCity = useMemo(()=>{
        return [...content.recommend.list, ...content.hot.list].find((item: IItem)=> item?.title === (cityName || '北京游玩路线'))
    },[cityName])

    const moreList = useMemo(()=>{
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const sortedArray = content.hot.list.slice().sort((_a, _b) => 0.5 - Math.random());  
        return sortedArray.slice(0, 3);
    },[content.hot.list])
   

    useEffect(()=>{
        setLoading(true)

        setTimeout(()=>{
            setLoading(false)
        },800)
    },[])

    if(loading){
        return <Skeleton />
    }
    
    return (
        <div className="city-wrapper"> 
            <Card className="content">
                <h2 className="title">{ currentCity?.title }</h2>
                <div className='city-desc'>
                    {currentCity?.desc}
                </div>

                <div className='city-image'>
                    <Image src={currentCity?.url} width={400} height={300} className='image'></Image>
                </div>

                <div className='more-city'>
                    <div className="more-city-title"> MORE CITY
                    </div>
                    <div className='more-city-nav'>
                        {
                            moreList.map((item) => 
                            ( <City key={item.id} current={item} /> ))
                        }
                        
                    </div>
                </div>
            </Card>
            <div className='footer'>
                    Open-source MIT Licensed | 豫ICP备2023006723号-2 | Copyright © 2017-present
            </div>
        </div>
    )

}

export default Page